<!doctype html>
<html lang="en">

<head>
    <title>一级科室管理</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- vue 用户界面 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- axios 网络通信 ajax -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <!-- 巨幕 -->
    <div class="jumbotron jumbotron-fluid pb-1 pt-5 mb-0">
        <div class="container">
            <h1 class="display-3">一级科室管理</h1>
            <p class="lead">科大协和医院</p>
        </div>
    </div>
    <!-- 页面导航 -->
    <nav class="breadcrumb">
        <a class="breadcrumb-item" href="index.html">首页</a>
        <span class="breadcrumb-item active">一级科室管理</span>
        <a class="breadcrumb-item" href="doctor.html">医生信息管理</a>
        <a class="breadcrumb-item" href="patient.html">就诊人管理</a>
        <a class="breadcrumb-item" href="register.html">预约挂号表管理</a>
    </nav>
    <!--主体容器-->
    <div id="fdp" class="container">
        <!--增加一级科室-->
        <button type="button" class="btn btn-success mt-0" data-toggle="modal" data-target="#modelIdadf">
            新增一级科室
        </button>
        <!-- Modal 增加一级科室-->
        <div class="modal fade" id="modelIdadf" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">新增加一级科室</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="form-group">
                                <label for="">一级科室名称</label>
                                <input type="text" v-model="fdname" class="form-control" name="" id=""
                                    aria-describedby="helpId" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="">一级科室介绍</label>
                                <input type="text" v-model="fdescription" class="form-control" name="" id=""
                                    aria-describedby="helpId" placeholder="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" @click="addFdpmt()" class="btn btn-primary"
                            data-dismiss="modal">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-striped table-hover">
            <thead class="text-center">
                <tr>
                    <th width="64px">科室名称</th>
                    <th width="64px">科室介绍</th>
                    <th width="128px">操作</th>
                </tr>
            </thead>
            <tbody class="text-center">
                <tr v-for="(p,index) in fdpmtList" :key="index">
                    <td>{{p.fdname}}</td>
                    <td>{{p.fdescription}}</td>
                    <td>
                        <div class="row">
                            <div class="col-lg-6 col-sm-12">
                                <!-- Button trigger modal -->
                                <button type="button" @click="save(p)" class="btn btn-outline-warning btn-sm btn-block"
                                    data-toggle="modal" data-target="#modelIdbj">编辑</button>
                                <!-- Modal 编辑就诊人信息-->
                                <div class="modal fade" id="modelIdbj" tabindex="-1" role="dialog"
                                    aria-labelledby="modelTitleId" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">编辑就诊人信息</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="container-fluid">
                                                    <div class="form-group">
                                                        <label for="">科室名称</label>
                                                        <input type="text" v-model="fdname"
                                                            class="form-control" name="" id="" aria-describedby="helpId"
                                                            placeholder="">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="">科室介绍</label>
                                                        <input type="text" v-model="fdescription"
                                                            class="form-control" name="" id="" aria-describedby="helpId"
                                                            placeholder="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">取消</button>
                                                <button type="button" @click="updaSdpmt()" class="btn btn-primary"
                                                    data-dismiss="modal">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <button type="button" @click="delDpmt(p.fdid)"
                                    class="btn btn-outline-danger btn-sm btn-block mt-lg-0 mt-sm-3">删除</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--Vue -->
    <script>
        new Vue({
            el: '#fdp',
            data: {
                fdpmtList: [],
                fdname: '',
                fdescription: '',
                fdid: '',
                fdpmt: '',

            },
            methods: {
                //点击编辑按钮，保存该实例对象,以便更新操作
                save: function (p) {
                    this.fdpmt = p;
                    //给编辑页面赋初值
                    this.fdname = p.fdname;
                    this.fdid = p.fdid;
                    this.fdescription = p.fdescription;

                },
                //更新
                updaSdpmt: function () {
                    let id = this.fdid;
                    url = `/api/Fdepartment/${id}`
                    let params = {
                        'fdid': id,
                        'fdname': this.fdname,
                        'fdescription': this.fdescription,
                    }
                    axios.put(url, params)
                        .then(res => {
                            //成功
                            console.log(res)
                            this.search();
                            //alert("编辑成功！")
                        })
                        .catch(err => {
                            console.error(err);
                        })
                },
                //增加一级科室
                addFdpmt: function () {
                    let url = '/api/Fdepartment'
                    let params = {
                        'fdname': this.fdname,
                        'fdescription': this.fdescription,
                    }
                    //alert(this.fname)
                    axios.post(url, params)
                        .then(res => {
                            console.log(res);
                            this.fdname = '';
                            this.fdescription = '';
                            this.search();
                        })
                        .catch(err => {
                            console.log(err)
                        })
                },
                //删除
                delDpmt: function (id) {
                    //Http的delete
                    let url = `/api/Fdepartment/${id}`
                    axios.delete(url)
                        .then(res => {
                            this.search();
                        })
                        .catch(err => {
                            console.error(err);
                        })
                },
                //查询
                search: function () {
                    let url = '/api/Fdepartment'
                    axios.get(url)
                        .then(res => {
                            this.fdpmtList = res.data;
                        })
                        .catch(err => {
                            //出错了
                            console.error(err);
                        })
                },
            },
            //挂载，第一次进入时调用
            mounted() {
                //请求服务器获得数据
                //HTTP：GET,POST,PUT,DELETE
                this.search();
            },
            
        })
    </script>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>